<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude Code 五大核心功能深度解析 | B站UP主专业指南</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* 导航栏 */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            z-index: 1000;
            padding: 10px 20px;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .nav-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #667eea;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 30px;
        }

        .nav-links a {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            transition: color 0.3s ease;
            position: relative;
        }

        .nav-links a:hover {
            color: #667eea;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background: #667eea;
            transition: width 0.3s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        /* 主标题区域 */
        .hero {
            text-align: center;
            padding: 120px 0 80px;
            color: white;
            margin-top: 0;
        }

        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
        }

        .hero .subtitle {
            font-size: 1.3rem;
            margin-bottom: 30px;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.6s forwards;
        }

        .hero .description {
            font-size: 1.1rem;
            max-width: 800px;
            margin: 0 auto 40px;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.9s forwards;
        }

        /* 内容卡片 */
        .content-card {
            background: white;
            border-radius: 20px;
            padding: 40px;
            margin: 40px 0;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            transform: translateY(50px);
            opacity: 0;
            transition: all 0.6s ease;
        }

        .content-card.visible {
            transform: translateY(0);
            opacity: 1;
        }

        .section-title {
            font-size: 2.5rem;
            color: #2c3e50;
            margin-bottom: 30px;
            text-align: center;
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            width: 60px;
            height: 4px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 2px;
        }

        /* 功能网格 */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin: 40px 0;
        }

        .feature-item {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 2px solid transparent;
        }

        .feature-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            border-color: #667eea;
        }

        .feature-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .feature-title {
            font-size: 1.5rem;
            color: #2c3e50;
            margin-bottom: 15px;
        }

        /* 代码块 */
        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            padding: 25px;
            border-radius: 12px;
            font-family: 'Courier New', monospace;
            margin: 20px 0;
            position: relative;
            overflow-x: auto;
        }

        .code-block::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(45deg, #667eea, #764ba2);
        }

        .code-title {
            color: #4fd1c7;
            font-weight: bold;
            margin-bottom: 10px;
        }

        /* 流程图 */
        .flow-chart {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 40px 0;
            flex-wrap: wrap;
            gap: 20px;
        }

        .flow-step {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 20px 30px;
            border-radius: 15px;
            text-align: center;
            flex: 1;
            min-width: 200px;
            position: relative;
            transition: transform 0.3s ease;
        }

        .flow-step:hover {
            transform: scale(1.05);
        }

        .flow-step::after {
            content: '→';
            position: absolute;
            right: -15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            color: #667eea;
        }

        .flow-step:last-child::after {
            display: none;
        }

        /* 统计图表 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin: 40px 0;
        }

        .stat-item {
            text-align: center;
            padding: 30px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .stat-item:hover {
            transform: translateY(-5px);
        }

        .stat-number {
            font-size: 3rem;
            font-weight: bold;
            background: linear-gradient(45deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 10px;
        }

        .stat-label {
            color: #666;
            font-size: 1.1rem;
        }

        /* 内存管理可视化 */
        .memory-structure {
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
            margin: 40px 0;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 15px;
        }

        .memory-layer {
            text-align: center;
            flex: 1;
            margin: 0 10px;
        }

        .memory-bar {
            background: linear-gradient(to top, #667eea, #764ba2);
            color: white;
            padding: 20px 10px;
            border-radius: 10px;
            margin-bottom: 15px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .memory-bar:hover {
            transform: scale(1.1);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .memory-bar.level1 { height: 80px; }
        .memory-bar.level2 { height: 120px; }
        .memory-bar.level3 { height: 100px; }

        /* MCP连接图 */
        .mcp-diagram {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 40px 0;
            position: relative;
        }

        .mcp-center {
            width: 150px;
            height: 150px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1.2rem;
            position: relative;
            z-index: 2;
        }

        .mcp-node {
            position: absolute;
            width: 100px;
            height: 100px;
            background: #f8f9fa;
            border: 3px solid #667eea;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            text-align: center;
            transition: all 0.3s ease;
        }

        .mcp-node:hover {
            background: #667eea;
            color: white;
            transform: scale(1.1);
        }

        .mcp-node:nth-child(2) { top: -50px; left: -120px; }
        .mcp-node:nth-child(3) { top: -50px; right: -120px; }
        .mcp-node:nth-child(4) { bottom: -50px; left: -120px; }
        .mcp-node:nth-child(5) { bottom: -50px; right: -120px; }

        /* 连接线 */
        .mcp-line {
            position: absolute;
            height: 2px;
            background: #667eea;
            opacity: 0.6;
        }

        /* 表格样式 */
        .command-table {
            width: 100%;
            border-collapse: collapse;
            margin: 30px 0;
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .command-table th {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 20px 15px;
            text-align: left;
        }

        .command-table td {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

        .command-table tr:hover {
            background: #f8f9fa;
        }

        .command {
            font-family: monospace;
            background: #f0f0f0;
            padding: 5px 10px;
            border-radius: 5px;
            color: #667eea;
            font-weight: bold;
        }

        /* 配置层级弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 10% auto;
            padding: 30px;
            border-radius: 20px;
            width: 80%;
            max-width: 600px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
            animation: modalSlideIn 0.3s ease-out;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-50px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .close:hover {
            color: #667eea;
        }

        .modal-title {
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 1.5rem;
        }

        .config-layer {
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .config-layer:hover {
            transform: scale(1.02);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        /* 动画 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .content-card {
                padding: 20px;
                margin: 20px 0;
            }
            
            .flow-chart {
                flex-direction: column;
            }
            
            .flow-step::after {
                content: '↓';
                right: 50%;
                top: 100%;
                transform: translateX(50%);
            }
        }

        /* 返回顶部按钮 */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(100px);
        }

        .back-to-top.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .back-to-top:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-content">
            <div class="logo">Claude Code 指南</div>
            <ul class="nav-links">
                <li><a href="#cli">CLI命令</a></li>
                <li><a href="#slash">斜杠命令</a></li>
                <li><a href="#settings">Settings设置</a></li>
                <li><a href="#memory">内存管理</a></li>
                <li><a href="#mcp">MCP协议</a></li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <!-- 主标题区域 -->
        <section class="hero">
            <h1>Claude Code 五大核心功能</h1>
            <p class="subtitle">代理式编程的革命性突破</p>
            <p class="description">
                深入探索Claude Code的CLI命令、斜杠命令、Settings设置、内存管理和MCP协议，
                掌握这款终端原生AI编程工具的精髓，开启高效的代理式开发之旅。
            </p>
        </section>

        <!-- CLI命令 -->
        <section id="cli" class="content-card">
            <h2 class="section-title">🖥️ CLI命令：终端原生的强大体验</h2>
            
            <p>Claude Code 命令行界面的完整参考，包括命令和标志。</p>

            <h3>CLI 命令</h3>
            <table class="command-table">
                <thead>
                    <tr>
                        <th>命令</th>
                        <th>描述</th>
                        <th>示例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><span class="command">claude</span></td>
                        <td>启动交互式 REPL</td>
                        <td>claude</td>
                    </tr>
                    <tr>
                        <td><span class="command">claude "query"</span></td>
                        <td>使用初始提示启动 REPL</td>
                        <td>claude "explain this project"</td>
                    </tr>
                    <tr>
                        <td><span class="command">claude -p "query"</span></td>
                        <td>通过 SDK 查询，然后退出</td>
                        <td>claude -p "explain this function"</td>
                    </tr>
                    <tr>
                        <td><span class="command">cat file | claude -p "query"</span></td>
                        <td>处理管道内容</td>
                        <td>cat logs.txt | claude -p "explain"</td>
                    </tr>
                    <tr>
                        <td><span class="command">claude -c</span></td>
                        <td>继续最近的对话</td>
                        <td>claude -c</td>
                    </tr>
                    <tr>
                        <td><span class="command">claude -c -p "query"</span></td>
                        <td>通过 SDK 继续</td>
                        <td>claude -c -p "Check for type errors"</td>
                    </tr>
                    <tr>
                        <td><span class="command">claude -r "&lt;session-id&gt;" "query"</span></td>
                        <td>通过 ID 恢复会话</td>
                        <td>claude -r "abc123" "Finish this PR"</td>
                    </tr>
                    <tr>
                        <td><span class="command">claude update</span></td>
                        <td>更新到最新版本</td>
                        <td>claude update</td>
                    </tr>
                    <tr>
                        <td><span class="command">claude mcp</span></td>
                        <td>配置模型上下文协议 (MCP) 服务器</td>
                        <td>claude mcp</td>
                    </tr>
                </tbody>
            </table>

            <h3>CLI 标志</h3>
            <table class="command-table">
                <thead>
                    <tr>
                        <th>标志</th>
                        <th>描述</th>
                        <th>示例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><span class="command">--add-dir</span></td>
                        <td>添加额外的工作目录供 Claude 访问</td>
                        <td>claude --add-dir ../apps ../lib</td>
                    </tr>
                    <tr>
                        <td><span class="command">--allowedTools</span></td>
                        <td>应该在不提示用户许可的情况下允许的工具列表</td>
                        <td>"Bash(git log:*)" "Read"</td>
                    </tr>
                    <tr>
                        <td><span class="command">--disallowedTools</span></td>
                        <td>应该在不提示用户许可的情况下禁止的工具列表</td>
                        <td>"Bash(git diff:*)" "Edit"</td>
                    </tr>
                    <tr>
                        <td><span class="command">--print, -p</span></td>
                        <td>打印响应而不使用交互模式</td>
                        <td>claude -p "query"</td>
                    </tr>
                    <tr>
                        <td><span class="command">--output-format</span></td>
                        <td>指定打印模式的输出格式（text、json、stream-json）</td>
                        <td>claude -p "query" --output-format json</td>
                    </tr>
                    <tr>
                        <td><span class="command">--verbose</span></td>
                        <td>启用详细日志记录</td>
                        <td>claude --verbose</td>
                    </tr>
                    <tr>
                        <td><span class="command">--model</span></td>
                        <td>设置使用的模型</td>
                        <td>claude --model claude-sonnet-4-20250514</td>
                    </tr>
                    <tr>
                        <td><span class="command">--permission-mode</span></td>
                        <td>在指定的权限模式下开始</td>
                        <td>claude --permission-mode plan</td>
                    </tr>
                    <tr>
                        <td><span class="command">--continue</span></td>
                        <td>在当前目录中加载最近的对话</td>
                        <td>claude --continue</td>
                    </tr>
                    <tr>
                        <td><span class="command">--dangerously-skip-permissions</span></td>
                        <td>跳过权限提示（谨慎使用）</td>
                        <td>claude --dangerously-skip-permissions</td>
                    </tr>
                                 </tbody>
             </table>

             <div style="text-align: center; margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
                 <h4 style="color: #2c3e50; margin-bottom: 15px;">📚 官方文档参考</h4>
                 <p style="margin: 0;">
                     <a href="https://docs.anthropic.com/zh-CN/docs/claude-code/cli-reference" 
                        style="color: #667eea; text-decoration: none; font-weight: bold;" 
                        target="_blank">
                         ➤ Claude Code CLI 参考文档
                     </a>
                 </p>
             </div>
         </section>

        <!-- 斜杠命令 -->
        <section id="slash" class="content-card">
            <h2 class="section-title">⚡ 斜杠命令：高效操作的快捷键</h2>
            
            <p>斜杠命令是Claude Code中的"魔法咒语"，让你能够快速执行特定操作，极大提升工作效率。</p>

            <table class="command-table">
                <thead>
                    <tr>
                        <th>命令</th>
                        <th>分类</th>
                        <th>功能描述</th>
                        <th>使用场景</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><span class="command">/clear</span></td>
                        <td>对话管理</td>
                        <td>清空当前对话历史，释放上下文空间</td>
                        <td>开始新任务时</td>
                    </tr>
                    <tr>
                        <td><span class="command">/compact</span></td>
                        <td>对话管理</td>
                        <td>智能压缩对话历史，保留关键信息</td>
                        <td>长会话优化</td>
                    </tr>
                    <tr>
                        <td><span class="command">/init</span></td>
                        <td>项目管理</td>
                        <td>分析代码库并生成CLAUDE.md文件</td>
                        <td>项目初始化</td>
                    </tr>
                    <tr>
                        <td><span class="command">/cost</span></td>
                        <td>成本管理</td>
                        <td>查看当前会话Token使用量和费用</td>
                        <td>成本监控</td>
                    </tr>
                    <tr>
                        <td><span class="command">/model</span></td>
                        <td>配置管理</td>
                        <td>切换使用的Claude模型</td>
                        <td>性能调优</td>
                    </tr>
                    <tr>
                        <td><span class="command">/mcp</span></td>
                        <td>扩展功能</td>
                        <td>管理模型上下文协议服务器</td>
                        <td>能力扩展</td>
                    </tr>
                </tbody>
            </table>

            <div class="feature-grid">
                <div class="feature-item">
                    <div class="feature-icon">🛠️</div>
                    <h3 class="feature-title">自定义命令</h3>
                    <p>在.claude/commands/目录下创建Markdown文件，封装团队专属工作流</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">🔄</div>
                    <h3 class="feature-title">参数传递</h3>
                    <p>使用$*变量在自定义命令中处理用户输入参数</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">📚</div>
                    <h3 class="feature-title">命令库</h3>
                    <p>项目级和全局级命令分层管理，满足不同场景需求</p>
                </div>
            </div>

            <div class="code-block">
                <div class="code-title">自定义斜杠命令示例</div>
                <pre># 创建自定义命令文件
.claude/commands/review.md

# 文件内容（支持参数传递）：
请对$*指定的文件或Git变更执行全面的代码审查：
1. 检查是否遵循TypeScript和React最佳实践
2. 验证错误处理逻辑和用户体验
3. 确保符合无障碍设计标准
4. 评估单元测试覆盖率

如果没有指定参数，则审查最近的Git变更。

# 使用方法示例：
/review                          # 审查最近的Git变更
/review src/components/Button.tsx # 审查指定文件
/review --help                   # 显示帮助信息

# 创建带多个参数的命令
.claude/commands/deploy.md

# 文件内容：
部署应用到$1环境，使用$2配置文件：
1. 验证$1环境的配置
2. 使用$2配置文件进行构建
3. 执行部署流程
4. 运行健康检查

# 使用方法：
/deploy staging config/staging.yml
/deploy production config/prod.yml</pre>
                          </div>

              <div style="text-align: center; margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
                  <h4 style="color: #2c3e50; margin-bottom: 15px;">📚 官方文档参考</h4>
                  <p style="margin: 0;">
                      <a href="https://docs.anthropic.com/zh-CN/docs/claude-code/slash-commands" 
                         style="color: #667eea; text-decoration: none; font-weight: bold;" 
                         target="_blank">
                          ➤ Claude Code 斜杠命令文档
                      </a>
                  </p>
              </div>
          </section>

          <!-- Settings设置 -->
        <section id="settings" class="content-card">
            <h2 class="section-title">⚙️ Settings设置：五层配置体系</h2>
            
            <h3>🎯 什么是Settings设置？</h3>
            <p>Settings设置是Claude Code的核心配置系统，它决定了AI代理如何与您的代码库交互。通过精细的配置管理，您可以：</p>
            <ul>
                <li><strong>控制AI行为：</strong>设置AI使用的模型、温度参数、最大token数等</li>
                <li><strong>管理工具权限：</strong>精确控制AI可以执行哪些操作，保障代码安全</li>
                <li><strong>定制工作流：</strong>适配团队的编码规范和项目特定需求</li>
                <li><strong>平衡效率与安全：</strong>在自动化便利性和操作安全性之间找到最佳平衡点</li>
            </ul>
            
            <h3>🔧 设置的作用</h3>
            <div class="feature-grid">
                <div class="feature-item">
                    <div class="feature-icon">🛡️</div>
                    <h3 class="feature-title">安全控制</h3>
                    <p>通过allow/deny规则精确控制AI可以执行的命令和访问的文件</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">⚡</div>
                    <h3 class="feature-title">性能优化</h3>
                    <p>配置模型选择、token限制、温度参数来优化响应质量和速度</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">👥</div>
                    <h3 class="feature-title">团队协作</h3>
                    <p>项目级配置确保团队成员使用一致的AI行为标准</p>
                </div>
            </div>
            
            <p>Claude Code提供了精细的五层配置系统，按优先级从高到低排列，让你能够精确控制AI代理的行为。</p>

            <div class="memory-structure">
                <div class="memory-layer">
                    <div class="memory-bar level1 config-layer" onclick="showConfigModal('enterprise')">
                        <strong>1. 企业策略</strong><br>
                        系统级强制设置
                    </div>
                    <p>最高优先级</p>
                </div>
                <div class="memory-layer">
                    <div class="memory-bar level2 config-layer" onclick="showConfigModal('cmdline')">
                        <strong>2. 命令行参数</strong><br>
                        临时覆盖设置
                    </div>
                    <p>单次运行有效</p>
                </div>
                <div class="memory-layer">
                    <div class="memory-bar level3 config-layer" onclick="showConfigModal('project')">
                        <strong>3. 项目设置</strong><br>
                        团队共享配置
                    </div>
                    <p>项目特定规则</p>
                </div>
                <div class="memory-layer">
                    <div class="memory-bar level1 config-layer" onclick="showConfigModal('user')">
                        <strong>4. 用户全局</strong><br>
                        个人默认偏好
                    </div>
                    <p>跨项目设置</p>
                </div>
                <div class="memory-layer">
                    <div class="memory-bar level2 config-layer" onclick="showConfigModal('default')">
                        <strong>5. 默认设置</strong><br>
                        系统内置配置
                    </div>
                    <p>最低优先级</p>
                </div>
            </div>

            <h3>🔐 权限系统</h3>
            <div class="feature-grid">
                <div class="feature-item">
                    <div class="feature-icon">🛡️</div>
                    <h3 class="feature-title">安全模式</h3>
                    <p>默认模式下每次操作都需要用户确认，确保安全性</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">⚡</div>
                    <h3 class="feature-title">自动模式</h3>
                    <p>使用--dangerously-skip-permissions跳过权限检查</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">⚖️</div>
                    <h3 class="feature-title">精细控制</h3>
                    <p>通过allow/deny规则精确管理各项权限</p>
                </div>
            </div>

            <div class="code-block">
                <div class="code-title">权限配置示例</div>
                <pre># settings.json配置示例
{
  "allow": [
    "bash:npm run test",
    "bash:git status",
    "edit:src/**/*.js"
  ],
  "deny": [
    "bash:rm -rf",
    "bash:sudo *"
  ],
  "model": "claude-3-5-sonnet-20241022",
  "temperature": 0.3
}

# 启动自动模式（谨慎使用）
claude --dangerously-skip-permissions</pre>
            </div>

            <div class="stats-container">
                <div class="stat-item">
                    <div class="stat-number">5</div>
                    <div class="stat-label">配置层级</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">20+</div>
                    <div class="stat-label">可配置选项</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">100%</div>
                    <div class="stat-label">安全可控</div>
                </div>
            </div>

            <!-- 配置弹窗 -->
            <div id="configModal" class="modal">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <h3 class="modal-title" id="modalTitle">配置详情</h3>
                    <div id="modalContent">
                        <!-- 动态内容将在这里显示 -->
                    </div>
                </div>
            </div>

            <div style="text-align: center; margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
                <h4 style="color: #2c3e50; margin-bottom: 15px;">📚 官方文档参考</h4>
                <p style="margin: 0;">
                    <a href="https://docs.anthropic.com/zh-CN/docs/claude-code/settings" 
                       style="color: #667eea; text-decoration: none; font-weight: bold;" 
                       target="_blank">
                        ➤ Claude Code Settings 官方文档
                    </a>
                </p>
            </div>
        </section>

        <!-- 内存管理 -->
        <section id="memory" class="content-card">
            <h2 class="section-title">🧠 内存管理：AI的项目记忆系统</h2>
            
            <h3>📝 什么是CLAUDE.md文件？</h3>
            <p>CLAUDE.md文件是Claude Code的"大脑"，它是一个特殊的Markdown文件，相当于给AI的<strong>项目说明书</strong>和<strong>行为指南</strong>。当Claude Code启动时，会自动读取这个文件，将其内容作为高优先级的上下文信息。</p>
            
            <h3>🎯 CLAUDE.md的作用</h3>
            <div class="feature-grid">
                <div class="feature-item">
                    <div class="feature-icon">📖</div>
                    <h3 class="feature-title">项目文档</h3>
                    <p>记录项目技术栈、架构决策、核心模块，让AI快速理解代码库</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">📏</div>
                    <h3 class="feature-title">编码规范</h3>
                    <p>定义代码风格、命名约定、测试要求，确保AI生成的代码符合团队标准</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">⚡</div>
                    <h3 class="feature-title">常用命令</h3>
                    <p>记录构建、测试、部署等常用命令，让AI能够直接执行项目操作</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">🔄</div>
                    <h3 class="feature-title">工作流程</h3>
                    <p>说明Git分支策略、提交规范、发布流程，让AI遵循团队协作模式</p>
                </div>
            </div>
            
            <h3>💡 为什么需要CLAUDE.md？</h3>
            <div style="padding: 20px; background: linear-gradient(135deg, #e3f2fd, #f3e5f5); border-radius: 10px; margin: 20px 0;">
                <h4 style="color: #1976d2; margin-bottom: 15px;">解决AI"健忘"问题</h4>
                <p style="margin: 0; color: #424242;">
                    没有CLAUDE.md时，每次与AI交互都需要重新解释项目背景、技术栈、编码规范等信息，不仅浪费时间，还消耗大量token。
                    CLAUDE.md文件实现了"<strong>一次告知，永久遵循</strong>"的效果，让AI成为真正了解你项目的智能助手。
                </p>
            </div>
            
            <p>CLAUDE.md文件系统是Claude Code最具革命性的功能之一，它为AI提供持久化的项目记忆，让每次交互都基于完整的上下文。</p>

            <div style="padding: 20px; background: #fff3cd; border-left: 4px solid #ffc107; margin: 20px 0; border-radius: 5px;">
                <h4 style="color: #856404; margin-bottom: 10px;">⚠️ 重要更新</h4>
                <p style="color: #856404; margin: 0;">
                    <strong>./CLAUDE.local.md 已被废弃：</strong>根据官方文档，本地项目内存文件 ./CLAUDE.local.md 已不再支持。
                    现在推荐使用项目级和用户级的CLAUDE.md文件来管理项目记忆。
                </p>
            </div>

            <h3>📁 双层记忆架构</h3>
            <div class="memory-structure">
                <div class="memory-layer">
                    <div class="memory-bar level2">
                        <strong>项目内存</strong><br>
                        ./CLAUDE.md
                    </div>
                    <p>团队共享的项目宪法</p>
                </div>
                <div class="memory-layer">
                    <div class="memory-bar level3">
                        <strong>用户内存</strong><br>
                        ~/.claude/CLAUDE.md
                    </div>
                    <p>个人全局偏好设置</p>
                </div>
            </div>

            <h3>🛠️ 内存管理命令</h3>
            <div class="feature-grid">
                <div class="feature-item">
                    <div class="feature-icon">🚀</div>
                    <h3 class="feature-title">/init 命令</h3>
                    <p>自动分析项目并生成或更新CLAUDE.md文件，创建项目的AI记忆基础</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">💾</div>
                    <h3 class="feature-title">/memory 命令</h3>
                    <p>显示当前会话的内存使用情况，包括加载的CLAUDE.md文件和上下文信息</p>
                </div>
            </div>

            <div class="code-block">
                <div class="code-title">CLAUDE.md示例结构</div>
                <pre># 项目核心指令

## 技术栈与架构
- 框架：Next.js 14+ (App Router)
- 语言：TypeScript (strict模式)
- 样式：Tailwind CSS
- 状态管理：Zustand
- 测试：Jest + React Testing Library

## 常用命令
- `npm run dev` - 启动开发服务器
- `npm run test` - 运行测试
- `npm run build` - 构建生产版本

## 编码规范
- 使用函数式组件和Hooks
- 所有导出函数必须有JSDoc注释
- 遵循Conventional Commits规范

## 模块化导入
@./docs/api_definitions.md
@./docs/testing_strategy.md</pre>
            </div>

            <h3>🔄 记忆加载机制</h3>
            <div class="flow-chart">
                <div class="flow-step">
                    <strong>启动扫描</strong><br>
                    从当前目录向上递归
                </div>
                <div class="flow-step">
                    <strong>层级加载</strong><br>
                    按优先级读取文件
                </div>
                <div class="flow-step">
                    <strong>按需加载</strong><br>
                    子目录文件动态引入
                </div>
                <div class="flow-step">
                    <strong>上下文融合</strong><br>
                    构建完整项目记忆
                </div>
            </div>

            <div class="feature-grid">
                <div class="feature-item">
                    <div class="feature-icon">📋</div>
                    <h3 class="feature-title">项目宪法</h3>
                    <p>定义团队共享的技术栈、架构决策和编码规范</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">👤</div>
                    <h3 class="feature-title">个人偏好</h3>
                    <p>跨项目的个人编码风格和工作习惯</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">🔧</div>
                    <h3 class="feature-title">模块导入</h3>
                    <p>使用@符号导入其他文档，实现知识库模块化</p>
                </div>
            </div>

            <div style="text-align: center; margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
                <h4 style="color: #2c3e50; margin-bottom: 15px;">📚 官方文档参考</h4>
                <p style="margin: 0;">
                    <a href="https://docs.anthropic.com/zh-CN/docs/claude-code/memory" 
                       style="color: #667eea; text-decoration: none; font-weight: bold;" 
                       target="_blank">
                        ➤ Claude Code Memory 官方文档
                    </a>
                </p>
            </div>
        </section>

        <!-- MCP协议 -->
        <section id="mcp" class="content-card">
            <h2 class="section-title">🌐 MCP协议：连接万物的AI接口</h2>
            
            <p>模型上下文协议（MCP）是Claude Code的"终极武器"，它为AI打开了通往整个数字世界的大门。</p>

            <div style="display: flex; justify-content: center; align-items: center; margin: 40px 0;">
                <div style="text-align: center; padding: 30px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border-radius: 20px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);">
                    <h3 style="margin: 0; font-size: 1.5rem;">Claude Code</h3>
                    <p style="margin: 10px 0 0 0; opacity: 0.9;">通过MCP协议连接各种外部服务</p>
                </div>
            </div>

            <h3>🛠️ MCP 命令列表</h3>
            <table class="command-table">
                <thead>
                    <tr>
                        <th>命令</th>
                        <th>功能描述</th>
                        <th>使用示例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><span class="command">claude mcp</span></td>
                        <td>启动MCP配置向导</td>
                        <td>claude mcp</td>
                    </tr>
                    <tr>
                        <td><span class="command">claude mcp add</span></td>
                        <td>添加新的MCP服务器</td>
                        <td>claude mcp add postgres-server</td>
                    </tr>
                    <tr>
                        <td><span class="command">claude mcp list</span></td>
                        <td>列出已配置的MCP服务器</td>
                        <td>claude mcp list</td>
                    </tr>
                    <tr>
                        <td><span class="command">claude mcp remove</span></td>
                        <td>移除指定的MCP服务器</td>
                        <td>claude mcp remove server-name</td>
                    </tr>
                    <tr>
                        <td><span class="command">claude mcp status</span></td>
                        <td>查看MCP服务器连接状态</td>
                        <td>claude mcp status</td>
                    </tr>
                    <tr>
                        <td><span class="command">claude mcp test</span></td>
                        <td>测试MCP服务器连接</td>
                        <td>claude mcp test server-name</td>
                    </tr>
                </tbody>
            </table>

            <div class="code-block">
                <div class="code-title">MCP配置示例</div>
                <pre># 添加PostgreSQL MCP服务器
claude mcp add pg_server /path/to/postgres-mcp-server \
  --connection-string "postgresql://user:pass@host:port/db"

# 使用MCP查询数据库
> 请描述 @pg_server:schema://users 表的结构

# 查询业务数据
> 使用 @pg_server:db://sales_db 查询上个季度销售额最高的三个产品

# GitHub集成示例
> 分析 @github:issue://anthropics/claude-code/123 这个问题
> 执行 /mcp__github__review_pr 456 审查这个PR</pre>
            </div>

            <div style="text-align: center; margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
                <h4 style="color: #2c3e50; margin-bottom: 15px;">📚 官方文档参考</h4>
                <p style="margin: 0;">
                    <a href="https://docs.anthropic.com/zh-CN/docs/claude-code/mcp" 
                       style="color: #667eea; text-decoration: none; font-weight: bold;" 
                       target="_blank">
                        ➤ Claude Code MCP 协议文档
                    </a>
                </p>
            </div>
        </section>

        <!-- 总结 -->
        <section class="content-card">
            <h2 class="section-title">🎯 总结：开启代理式编程新时代</h2>
            
            <p>Claude Code通过这五大核心功能，构建了一个完整的代理式编程生态系统：</p>
            
            <div class="feature-grid">
                <div class="feature-item">
                    <div class="feature-icon">🖥️</div>
                    <h3 class="feature-title">CLI - 原生体验</h3>
                    <p>终端原生设计，无缝融入开发者工作流</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">⚡</div>
                    <h3 class="feature-title">斜杠 - 高效操作</h3>
                    <p>快捷命令体系，大幅提升操作效率</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">⚙️</div>
                    <h3 class="feature-title">设置 - 精准控制</h3>
                    <p>分层配置系统，平衡安全与便利</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">🧠</div>
                    <h3 class="feature-title">内存 - 智能记忆</h3>
                    <p>持久化上下文，让AI成为项目专家</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">🌐</div>
                    <h3 class="feature-title">MCP - 无限扩展</h3>
                    <p>开放协议连接万物，无限可能</p>
                </div>
            </div>
            
            <div style="text-align: center; margin-top: 40px; padding: 30px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border-radius: 15px;">
                <h3>🚀 立即开始你的Claude Code之旅</h3>
                <p style="margin: 20px 0; font-size: 1.1rem;">
                    从代码执行者到AI协调者，从重复劳动到创造性工作<br>
                    这不仅是工具的升级，更是开发者价值的升华
                </p>
                <div style="margin-top: 25px;">
                    <strong>官方资源：</strong> 
                    <a href="https://docs.anthropic.com/zh-CN/docs/claude-code" style="color: #fff; text-decoration: underline;">中文文档</a> | 
                    <a href="https://github.com/anthropics/claude-code" style="color: #fff; text-decoration: underline;">GitHub</a> | 
                    <a href="https://github.com/punkpeye/awesome-mcp-servers" style="color: #fff; text-decoration: underline;">MCP服务器集合</a>
                </div>
            </div>
        </section>
    </div>

    <!-- 返回顶部按钮 -->
    <button class="back-to-top" onclick="scrollToTop()">↑</button>

    <script>
        // 滚动动画
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);

        // 观察所有内容卡片
        document.querySelectorAll('.content-card').forEach(card => {
            observer.observe(card);
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            });
        });

        // 返回顶部功能
        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }

        // 显示/隐藏返回顶部按钮
        window.addEventListener('scroll', () => {
            const backToTop = document.querySelector('.back-to-top');
            if (window.pageYOffset > 300) {
                backToTop.classList.add('visible');
            } else {
                backToTop.classList.remove('visible');
            }
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', () => {
            const navbar = document.querySelector('.navbar');
            if (window.pageYOffset > 100) {
                navbar.style.background = 'rgba(255, 255, 255, 0.98)';
                navbar.style.boxShadow = '0 2px 30px rgba(0, 0, 0, 0.15)';
            } else {
                navbar.style.background = 'rgba(255, 255, 255, 0.95)';
                navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
            }
        });

        // MCP连接线动画
        function createMCPLines() {
            const diagram = document.querySelector('.mcp-diagram');
            const center = diagram.querySelector('.mcp-center');
            const nodes = diagram.querySelectorAll('.mcp-node');
            
            nodes.forEach((node, index) => {
                const line = document.createElement('div');
                line.className = 'mcp-line';
                
                // 计算连接线位置（简化版本）
                const angle = (index * 72) * Math.PI / 180; // 72度间隔
                const length = 80;
                
                line.style.width = length + 'px';
                line.style.left = '50%';
                line.style.top = '50%';
                line.style.transformOrigin = '0 50%';
                line.style.transform = `rotate(${angle}rad)`;
                
                diagram.appendChild(line);
            });
        }

        // 页面加载完成后创建连接线
        document.addEventListener('DOMContentLoaded', () => {
            createMCPLines();
        });

        // 统计数字动画
        function animateStats() {
            const statNumbers = document.querySelectorAll('.stat-number');
            statNumbers.forEach(stat => {
                const target = stat.textContent;
                if (!isNaN(target)) {
                    let current = 0;
                    const increment = target / 50;
                    const timer = setInterval(() => {
                        current += increment;
                        if (current >= target) {
                            stat.textContent = target;
                            clearInterval(timer);
                        } else {
                            stat.textContent = Math.floor(current);
                        }
                    }, 30);
                }
            });
        }

        // 当统计区域进入视野时触发动画
        const statsObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    animateStats();
                    statsObserver.unobserve(entry.target);
                }
            });
        });

        document.querySelectorAll('.stats-container').forEach(container => {
            statsObserver.observe(container);
        });

        // 配置弹窗功能
        function showConfigModal(type) {
            const modal = document.getElementById('configModal');
            const title = document.getElementById('modalTitle');
            const content = document.getElementById('modalContent');
            
            const configData = {
                enterprise: {
                    title: '企业策略配置',
                    content: `
                        <h4>配置说明：</h4>
                        <p>由系统管理员统一配置的强制性设置，个人用户无法覆盖。</p>
                        
                        <h4>配置文件位置：</h4>
                        <ul>
                            <li><strong>Linux/Mac:</strong> /etc/claude-code/managed-settings.json</li>
                            <li><strong>Windows:</strong> C:\\ProgramData\\claude-code\\managed-settings.json</li>
                        </ul>
                        
                        <h4>示例配置：</h4>
                        <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px;">
{
  "model": "claude-3-5-sonnet-20241022",
  "allowedTools": ["Read", "Write"],
  "disallowedTools": ["Bash"],
  "maxTokens": 4096
}</pre>
                    `
                },
                cmdline: {
                    title: '命令行参数配置',
                    content: `
                        <h4>配置说明：</h4>
                        <p>通过命令行参数传递的设置，仅对当前会话有效，优先级最高。</p>
                        
                        <h4>常用命令行参数：</h4>
                        <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px;">
# 设置模型
claude --model claude-3-5-sonnet-20241022

# 设置允许的工具
claude --allowedTools "Read" "Write" "Bash(git:*)"

# 设置权限模式
claude --permission-mode auto

# 跳过权限检查（谨慎使用）
claude --dangerously-skip-permissions</pre>
                    `
                },
                project: {
                    title: '项目设置配置',
                    content: `
                        <h4>配置说明：</h4>
                        <p>项目级别的配置，团队成员共享，存储在项目根目录。</p>
                        
                        <h4>配置文件位置：</h4>
                        <p><strong>./settings.json</strong> (项目根目录)</p>
                        
                        <h4>示例配置：</h4>
                        <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px;">
{
  "model": "claude-3-5-sonnet-20241022",
  "allow": [
    "bash:npm run test",
    "bash:git status",
    "edit:src/**/*.js"
  ],
  "deny": [
    "bash:rm -rf",
    "bash:sudo *"
  ],
  "temperature": 0.3
}</pre>
                    `
                },
                user: {
                    title: '用户全局配置',
                    content: `
                        <h4>配置说明：</h4>
                        <p>用户个人的全局默认设置，应用于所有项目。</p>
                        
                        <h4>配置文件位置：</h4>
                        <ul>
                            <li><strong>Linux/Mac:</strong> ~/.claude/settings.json</li>
                            <li><strong>Windows:</strong> %APPDATA%\\claude\\settings.json</li>
                        </ul>
                        
                        <h4>命令行配置：</h4>
                        <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px;">
# 通过CLI配置用户全局设置
claude config set model claude-3-5-sonnet-20241022
claude config set temperature 0.3
claude config list  # 查看所有配置</pre>
                        
                        <h4>示例配置文件：</h4>
                        <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px;">
{
  "model": "claude-3-5-sonnet-20241022",
  "temperature": 0.3,
  "maxTokens": 4096,
  "defaultPermissionMode": "interactive"
}</pre>
                    `
                },
                default: {
                    title: '默认设置配置',
                    content: `
                        <h4>配置说明：</h4>
                        <p>Claude Code的内置默认配置，当其他层级都未设置时使用。</p>
                        
                        <h4>默认配置值：</h4>
                        <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px;">
{
  "model": "claude-3-5-sonnet-20241022",
  "temperature": 0,
  "maxTokens": 8192,
  "permissionMode": "interactive",
  "outputFormat": "text",
  "verbose": false
}</pre>
                        
                        <h4>注意事项：</h4>
                        <ul>
                            <li>默认设置无法直接修改</li>
                            <li>可通过上级配置层级进行覆盖</li>
                            <li>确保系统的基本可用性</li>
                        </ul>
                    `
                }
            };
            
            const data = configData[type];
            if (data) {
                title.textContent = data.title;
                content.innerHTML = data.content;
                modal.style.display = 'block';
            }
        }
        
        // 关闭弹窗
        document.addEventListener('DOMContentLoaded', function() {
            const modal = document.getElementById('configModal');
            const closeBtn = document.getElementsByClassName('close')[0];
            
            // 点击关闭按钮
            if (closeBtn) {
                closeBtn.onclick = function() {
                    modal.style.display = 'none';
                }
            }
            
            // 点击背景关闭
            window.onclick = function(event) {
                if (event.target === modal) {
                    modal.style.display = 'none';
                }
            }
        });
    </script>
</body>
</html> 